<template>
  <div>
    <div>
      <div style="font-weight: bold;font-size: 16px;margin-bottom: 10px">质检排行榜</div>
      <div style="display: flex;align-items: center;margin-bottom: 10px">
        <span>日期：</span>
        <a-range-picker
          :default-value="[moment(getCurrentData(date[0]), dateFormat),moment(getCurrentData(date[1]), dateFormat),]"
          @change="onChange"
          v-model:value="date"
          style="flex: 1"/>
      </div>
      <div style="display: flex;align-items: center;margin-bottom: 10px">
        <span>线别：</span>
        <a-select allowClear v-model="linecode" placeholder="请选择线别" style="flex: 1" @change="handleProvinceChange">
          <a-select-option v-for="item in lineList" :key="item.productlineCode">
            {{ item.productlineName }}
          </a-select-option>
        </a-select>
      </div>
      <div style="display: flex;align-items: center;margin-bottom: 10px;">
        <span>产品型号：</span>
        <a-select
          allowClear
          v-model="procode"
          style="flex: 1"
          show-search
          placeholder="请输入或选择产品型号"
          option-filter-prop="children"
          :filter-option="filterOption"
          @change="procodeChange"
        >
          <a-select-option v-for="item in procodeList" :key="item.materielCode">
            {{ item.productName }}
          </a-select-option>
        </a-select>
      </div>
      <a-tabs type="card" v-model="active" @change="activeChange">
        <a-tab-pane key="按日" tab="按日">
          <a-table :pagination="false" :columns="columns" :data-source="tableData">
            <a slot="name" slot-scope="text">{{ text }}</a>
            <template slot="lpl" slot-scope="text">
              <div>{{ text * 100 + '%' }}</div>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="按周" tab="按周">
          <a-table :pagination="false" :columns="columns" :data-source="tableData">
            <a slot="name" slot-scope="text">{{ text }}</a>
            <template slot="lpl" slot-scope="text">
              <div>{{ text * 100 + '%' }}</div>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="按月" tab="按月">
          <a-table :pagination="false" :columns="columns" :data-source="tableData">
            <a slot="name" slot-scope="text">{{ text }}</a>
            <template slot="lpl" slot-scope="text">
              <div>{{ text * 100 + '%' }}</div>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="按年" tab="按年">
          <a-table :pagination="false" :columns="columns" :data-source="tableData">
            <a slot="name" slot-scope="text">{{ text }}</a>
            <template slot="lpl" slot-scope="text">
              <div>{{ text * 100 + '%' }}</div>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </div>

  </div>
</template>

<script>
const columns = [
  {
    title: '线别',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' }
  },
  // {
  //   title: '类型',
  //   dataIndex: 'value',
  //   key: 'value',
  // },
  {
    title: '投入数',
    dataIndex: 'zs',
    key: 'zs'
  },
  {
    title: '不良数',
    dataIndex: 'bls',
    key: 'bls'
  },
  {
    title: '良品率',
    dataIndex: 'lpl',
    key: 'lpl',
    scopedSlots: { customRender: 'lpl' }
  }
//  {
//    title: 'DIP',
//    dataIndex: 'DIP',
//    key: 'DIP',
//    ellipsis: true,
//  },
//  {
//    title: 'Assembly',
//    dataIndex: 'Assembly',
//    key: 'Assembly',
//    ellipsis: true,
//  },
]
import moment from 'moment';
export default {
  props: {
    StatisticalData: {
      type: Array,
      default: []
    },
    activePart: {
      type: String,
      default: 'SMT'
    },
    activeKey: {
      type: String,
      default: 'FPYR'
    }
  },
  name: 'StatisticalTable',
  data() {
    return {
      columns,
      active: '按日',
      date: ['', ''],
      tableData: [],
      linecode:'',
      procode:'',
      lineList: [],
      procodeList:[],
      research:false,
      dateFormat: 'YYYY-MM-DD',

    }
  },
  watch: {
    activePart: {
      handler(newVal, oldVal) {
        this.linecode=''
        this.procode=''
        this.getList()
        this.getPaihang()
      }
    },
    activeKey: {
      handler(newVal, oldVal) {
        this.getPaihang()
      }
    }
  },
  mounted() {
    this.date[0] = this.$store.state.app.begindate
    this.date[1] = this.$store.state.app.enddate
    this.getPaihang()
    this.getAllProcodeList()
    this.getList()
  },
  methods: {
    moment,
    getCurrentData(date) {
      return new Date(date).toLocaleDateString();
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    getAllProcodeList(){
      this.$http.get('/chiefdata/mesChiefdataMateriel/getDashCpList').then(res=>{
        if (res.success) {
          this.procodeList = res.result
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getList(){
      this.$http.get('/chiefdata/mesChiefdataProductline/getListByType',{
        params:{
          type:this.activePart
        }
      }).then(res=>{
        if (res.success) {
          this.lineList = res.result
        } else {
          this.$message.error(res.message)
        }
      })
    },
    procodeChange(){
      this.research = !this.research
      this.$store.dispatch('SetResearch', this.research)
      this.$store.dispatch('SetProcode', this.procode)
      this.getPaihang()
    },
    handleProvinceChange(){
      this.research = !this.research
      this.$store.dispatch('SetResearch', this.research)
      this.$store.dispatch('SetLinecode', this.linecode)
      this.getPaihang()
    },
    onChange(date, dateString) {
      this.research = !this.research
      this.date = dateString
      this.$store.dispatch('SetBegindate', dateString[0])
      this.$store.dispatch('SetEnddate', dateString[1])
      this.$store.dispatch('SetKjtext', this.active)
      this.$store.dispatch('SetResearch', this.research)
      this.getPaihang()
    },
    activeChange() {
      this.$store.dispatch('SetKjtext', this.active)
      this.getPaihang()
    },
    getPaihang() {
      this.active = this.$store.state.app.kjtext
      this.linecode = this.$store.state.app.linecode
      this.procode = this.$store.state.app.procode

      this.$http.get('/inspect/reportapi/getOrderList', {
        params: {
          line: this.activePart,
          type: this.activeKey,
          begindate: this.$store.state.app.begindate,
          enddate: this.$store.state.app.enddate,
          kjtext: this.$store.state.app.kjtext,
          linecode:this.$store.state.app.linecode,
          procode:this.$store.state.app.procode,
        }
      }).then(res => {
        if (res.success) {
          this.tableData = res.result
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>